import { colorStr, getQueryParams, selectOne } from '@/utils/utils';
import { DownOutlined } from '@ant-design/icons';
import { Button, Dropdown, Menu, Modal } from 'antd';
import { useEffect, useState } from 'react';
import { CirclePicker } from 'react-color';
import { history } from 'umi';
import styles from './index.less';

interface Props {
  lastRoute: any;
  setColorParent: any;
}

const BackHead: React.FC<Props> = ({ lastRoute, setColorParent }) => {
  const qs = getQueryParams();
  // 查看余额弹窗的visible
  const [seeMoney, setSeeMoney] = useState<boolean>(false);
  // 修改主题颜色弹窗的visible
  const [colorModal, setColorModal] = useState<boolean>(false);
  // 主题颜色的值
  const [color, setColor] = useState<string>(localStorage.getItem('color') || '#1a7721');
  const [colorCurrent, setColorCurrent] = useState<string>('');

  const showMoney = () => {
    setSeeMoney(true);
  };

  useEffect(() => {
    if (localStorage.getItem('qs')) {
      selectOne(qs.role);
    }
  }, [qs.role]);

  // 修改主题颜色
  const colorChange = () => {
    setColorModal(false);
    setColor(colorCurrent);
    setColorParent(colorCurrent);
    localStorage.setItem('color', colorCurrent);
  };

  const menu = (
    <Menu>
      {qs.role === '3' ? (
        <Menu.Item key={'1'}>
          <div
            onClick={() => {
              history.push({
                pathname: '/',
                query: { lastRoute: lastRoute },
              });
            }}
          >
            进入商城
          </div>
        </Menu.Item>
      ) : (
        <Menu.Item key={'1'}>
          <div
            onClick={() => {
              history.push({
                pathname: '/changeInformation',
                query: { lastRoute: lastRoute, userRole: 'shopChange' },
              });
            }}
          >
            修改注册信息
          </div>
        </Menu.Item>
      )}
      <Menu.Item key={'2'}>
        <div onClick={showMoney}>查看余额</div>
      </Menu.Item>
      <Menu.Item key={'3'}>
        <div
          onClick={() => {
            setColorModal(true);
          }}
        >
          修改主题颜色
        </div>
      </Menu.Item>
      <Menu.Item key={'4'}>
        <div
          onClick={() => {
            history.push('/');
            localStorage.removeItem('qs');
            localStorage.removeItem('color');
          }}
        >
          退出登录
        </div>
      </Menu.Item>
    </Menu>
  );

  return (
    <div className={styles.container} style={{ backgroundColor: colorStr(2) }}>
      <div className={styles.logo}>
        <div className={styles.logotext} style={{ color: color }}>
          四季养生网
        </div>
        <img src={require('@/assets/images/logo.png')} alt={'加载失败'} />
      </div>
      <div className={styles.headRight}>
        <Dropdown overlay={menu}>
          <span
            className={styles.dropDown}
            onClick={(e) => e.preventDefault()}
            style={{ color: color }}
          >
            个人中心
            <DownOutlined style={{ fontSize: 16, marginLeft: 7, color: color }} />
          </span>
        </Dropdown>
      </div>
      <Modal
        title="查看余额"
        visible={seeMoney}
        onCancel={() => {
          setSeeMoney(false);
        }}
        footer={
          <div>
            <Button
              onClick={() => {
                setSeeMoney(false);
              }}
            >
              我知道了
            </Button>
          </div>
        }
      >
        <span style={{ fontSize: 15 }}>您的余额为：¥{qs.money.toFixed(2)}</span>
      </Modal>
      <Modal
        title="修改主题颜色"
        visible={colorModal}
        onCancel={() => {
          setColorModal(false);
        }}
        footer={
          <div>
            <Button onClick={colorChange}>提交</Button>
            <Button
              onClick={() => {
                setColorModal(false);
              }}
            >
              取消
            </Button>
          </div>
        }
      >
        <div className={styles.colorPicker}>
          <CirclePicker
            onChangeComplete={({ hex }) => {
              setColorCurrent(hex);
            }}
          />
          <div className={styles.colorBox}>
            <span>颜色预览：</span>
            <div
              className={styles.colorDiv}
              style={{ background: `${colorCurrent === '' ? color : colorCurrent}` }}
            />
          </div>
        </div>
      </Modal>
    </div>
  );
};
export default BackHead;
